<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel-@yield('title')</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
        <!-- Styles -->
        @section('style')
            <link rel="stylesheet" href="{{ asset('css/app.css') }}">
            <style>
                html, body {
                    background-color: #fff;
                    color: #636b6f;
                    font-family: 'Raleway', sans-serif;
                    font-weight: 100;
                    height: 100vh;
                    margin: 0;
                }

                .full-height {
                    height: 100vh;
                }

                .flex-center {
                    align-items: center;
                    display: flex;
                    justify-content: center;
                }

                .position-ref {
                    position: relative;
                }

                .top-right {
                    position: absolute;
                    right: 10px;
                    top: 18px;
                }

                .content {
                    text-align: center;
                }

                .title {
                    font-size: 24px;
                }

                .links > a {
                    color: #636b6f;
                    padding: 0 25px;
                    font-size: 12px;
                    font-weight: 600;
                    letter-spacing: .1rem;
                    text-decoration: none;
                    text-transform: uppercase;
                }

                .m-b-md {
                    margin-bottom: 30px;
                }
                .alter{
                    font-size: 26px;
                }
            </style>
        @show
    </head>
    <body>
        <div class="flex-center position-ref full-height">
                <div class="top-right links">
                    @component('componet.paginate')
                        @slot('title')
                            分页
                        @endslot
                            <ul>
                                @forelse($foods as $food)
                                    <li>{{$food->name}}</li>
                                    @empty
                                    null
                                @endforelse
                                {{ $foods->links()}}
                            </ul>
                    @endcomponent
                </div>
                @if (session('err'))
                    <div class="alter">
                        {{ session('err') }}
                    </div>
                @endif
            <div class="content">
                <div class="title m-b-md">
                    @yield('content')
                </div>
                <div class="links">
                @section('links')
                        <a href="https://laravel.com/docs">Documentation</a>
                        <a href="https://laracasts.com">Laracasts</a>
                        <a href="https://laravel-news.com">News</a>
                        <a href="https://forge.laravel.com">Forge</a>
                        <a href="https://github.com/laravel/laravel">GitHub</a>
                @show
                </div>
            </div>
        </div>
    </body>
    @section('script')
        <script src="{{ asset('js/app.js') }}"></script>
    @show
</html>
